<template>
  <div class="top-menu">
    <!--<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
    <div class="page-title">{{ title }}</div>
    <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" style="margin-left: 20px;"/>-->
    <a-dropdown type="text" v-model="visible">
      <span class="el-dropdown-link" style="display: flex;align-items: center">
        <img style="width: 42px;height: 42px;border-radius: 50%" src="../assets/avatar.png"> <span
          class="username-style">{{ userName }}</span> <a-icon type="down"/>
      </span>
      <a-menu slot="overlay" class="menu-class" placement="bottomRight">
        <a-menu-item key="logout" @click="logout">退出</a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'TopMenu',
    data () {
      return {
        visible: false
      }
    },
    computed: {
      title () {
        if (this.$route.meta) {
          return this.$route.meta.title
        } else {
          return ''
        }
      },
      userName () {
        if (this.$store.state.user) {
          return this.$store.state.user.name
        } else {
          return ''
        }
      },
      ...mapGetters([
        'sidebar',
        'device'
      ])
    },
    methods: {
      handleMenuClick (e) {
        if (e.key === 'logout') {
          this.logout()
        }
        if (e.key === 'changePassword') {
          // this.logout()
        }
        if (e.key === 'center') {
          // this.logout()
        }
        this.visible = false
      },
      logout () {
        this.$store.dispatch('Logout')
        location.reload()
      }
    }
  }
</script>

<style lang="less" scoped>
  .top-menu {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding:0 24px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    transition: 0.1s;
    border-bottom: 1px solid rgba(217, 217, 217, 100);
    .ant-dropdown-menu{
      width: 130px;
      text-align: center!important;
    }
    .page-title{
      font-size: 16px;
      color: #595959;
    }

    .username-style {
      margin: 0 8px 0 12px;
      font-size: 14px;
      color: #2493FC;
    }

  }
</style>
